<h1 mat-dialog-title>Save project as</h1>
<form [formGroup]="projectNameForm" class="file-name-form">
  <mat-form-field class="file-name-form-field">
    <input
      matInput
      (keydown)="onKeyDown($event)"
      type="text"
      formControlName="projectName"
      [ngClass]="{ 'is-invalid': form.projectName?.errors }"
      placeholder="Please enter name"
    />
    <mat-error *ngIf="form.projectName?.touched && form.projectName?.errors && form.projectName?.errors.required"
      >Project name is required</mat-error
    >
    <mat-error *ngIf="form.projectName?.touched && form.projectName?.errors && form.projectName?.errors.invalidName"
      >Project name is incorrect</mat-error
    >
  </mat-form-field>
  <div mat-dialog-actions>
    <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
    <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Save project</button>
  </div>
</form>
